<template>
    <el-drawer
    title="新增"
    :visible="isShowAddDialog"
    size="70%"
    @close="dialogClose"
    :before-close="handleClose"
      >
    <el-form :model="ruleForm" :rules="rules" ref="addForm" label-width="auto">
      <el-row :gutter="24">
          <el-col :span="12">
              <el-form-item label="发布机构" prop="companyName">
                  <el-input v-model="ruleForm.companyName"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="发布机构类型" prop="companyType">
                  <el-select v-model="ruleForm.companyType" class="select"></el-select>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="9">
              <el-form-item prop="province" label="所属地">
                  <el-select v-model="ruleForm.province" placeholder="省"></el-select>
              </el-form-item>
          </el-col>
          <el-col :span="9" class="style1">
              <el-form-item prop="city">
                  <el-select v-model="ruleForm.city" placeholder="市"></el-select>
              </el-form-item>
          </el-col>
          <el-col :span="9" class="style1">
              <el-form-item prop="county">
                  <el-select v-model="ruleForm.county" placeholder="县（区）"></el-select>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="12">
              <el-form-item label="商品名称" prop="goodName">
                  <el-input v-model="ruleForm.goodName"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="contact">
                  <el-input v-model="ruleForm.contact"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" prop="goodPrice">
                  <el-input v-model="ruleForm.goodPrice"></el-input>
              </el-form-item>
              <el-form-item label="资产类型" prop="assetType">
                  <el-select v-model="ruleForm.assetType" class="select"></el-select>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="商品类型" prop="goodType">
                  <el-select v-model="ruleForm.goodType" class="select"></el-select>
              </el-form-item>
              <el-form-item label="联系电话" prop="tel">
                  <el-input v-model="ruleForm.tel" class="select"></el-input>
              </el-form-item>
              <el-form-item label="评估价值" prop="value">
                  <el-input v-model="ruleForm.value" class="select"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="是否为罚没、涉黑、涉案、查处、扣押资产：" label-width="320px" prop="choose">
                <el-radio-group v-model="ruleForm.choose">
                    <el-radio label="0">是</el-radio>
                    <el-radio label="1">否</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-col>
      </el-row>
  
      <hr>
      <br>
  
      <el-row :gutter="24">
          <el-col :span="24">
              <el-form-item label="公告信息" prop="tip">
                  <el-input type="textarea" v-model="ruleForm.tip"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                  <el-input type="textarea" v-model="ruleForm.remark"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
  
      <hr>
      <br>
  
      <el-row :gutter="24">
          <el-col :span="24">
              <el-form-item label="上传图片" prop="photo">
                  <el-upload
                  v-model="ruleForm.photo"
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <div class="el-upload__tip" slot="tip">请按如下要求进行上传：格式：jpeg,jpg,git,bmp,png。</div>
                  </el-upload>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row>
          <br>
          <br>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="24">
              <el-form-item label="上传视频" prop="video" v-model="ruleForm.video">
                  <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple
                  :limit="2">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">请按如下要求进行上传：格式限制：mp4，大小限制：&lt;=200MB。</div>
                  </el-upload>
              </el-form-item>
          </el-col>
      </el-row>
  
      <el-row>
          <br>
          <br>
      </el-row>
  
      <el-row :gutter="24">
          <el-col :span="24">
              <el-form-item label="上传附件" prop="file" v-model="ruleForm.file">
                  <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple
                  :limit="2">
                  <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
              </el-form-item>
          </el-col>
      </el-row>
  
    </el-form>
  
    <el-row>
          <br>
          <br>
      </el-row>
  
    <span style="display: flex; margin-right: 1%;">
        <div style="flex: 1"></div>
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
    </span>
  
    <el-row>
        <br>
    </el-row>
  
  </el-drawer>
  
  </template>
  
  <script>
  export default {
      data(){
          return{
  
              ruleForm: {
                  companyName: '',
                  companyType: '',
                  province: '',
                  city: '',
                  county: '',
                  goodName: '',
                  goodType: '',
                  contact: '',
                  tel: '',
                  goodPrice: '',
                  value: '',
                  assetType: '',
                  choose: '',
                  
                  tip: '',
                  remark: '',
                  photo: '',
                  video: '',
                  file: ''
  
              },
              rules:{
                  companyName:[
                      {required: true, message: '请输入'}
                  ],
                  companyType:[
                      {required: true, message: '请选择'}
                  ],
                  province:[
                      {required: true, message: '请选择'}
                  ],
                  city:[
                      {required: true, message: '请选择'}
                  ],
                  county:[
                      {required: true, message: '请选择'}
                  ],
                  goodName:[
                      {required: true, message: '请输入'}
                  ],
                  goodType:[
                      {required: true, message: '请选择'}
                  ],
                  contact:[
                      {required: true, message: '请输入'}
                  ],
                  tel:[
                      {required: true, message: '请输入'}
                  ],
                  goodPrice:[
                      {required: true, message: '请输入'}
                  ],
                  value:[
                      {required: true, message: '请输入'}
                  ],
                  assetType:[
                      {required: true, message: '请选择'}
                  ],
                  choose:[
                      {required: true, message: '请选择'}
                  ],
                  tip:[
                      {required: false}
                  ],
                  remark:[
                      {required: false}
                  ],
                  photo:[
                      {required: true, message: '请选择'}
                  ],
                  video:[
                      {required: false}
                  ],
                  file:[
                      {required: false}
                  ],
              }
          }
      },
      props:{
          isShowAddDialog:{
              type:Boolean
          },
      },
      methods: {
          dialogClose(){ 
              this.$emit('dialogClose');
          },
          submitData(){
              this.$refs.addForm.validate((valid) => {
                  if (!valid) {
                      return ;
                  }
                  else {
                      this.$emit('dialogClose');
                  }
              });
          },
          handleAvatarSuccess(res, file) {
              this.imageUrl = URL.createObjectURL(file.raw);
          },
          beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg/jpg/git/bmp/png';
  
              if (!isJPG) {
                  this.$message.error('上传头像图片只能是jpeg/jpg/git/bmp/png格式!');
              }
              return isJPG;
          },
          handleClose(done) {
              done();
          },
          
      }
  }
  </script>
  
  <style>
      .el-radio__label{
          padding-left: 6px !important;
      }
      .el-row{
          margin-left: 0 !important;
          margin-right: 0 !important;
      }
      .select{
          width: 100%;
      }
      .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
      }
      .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
      }
      .avatar {
          width: 178px;
          height: 178px;
          display: block;
      }
      .el-dialog__close, .el-message-box__close{
          color: #606266 !important;
      }
      .style1{
          margin-left: -16%; 
      }
  </style>
  
  